<template>
	<view>

		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" height="90" bgColor="#0081ff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view class="u-nav-slot margin-top-xl text-xl flex" slot="center" >{{device.deviceName}} 分享管理</view>
			<view class="u-nav-slot margin-top-xl flex" slot="right" >
				<view class="margin-right-sm text-xl text-white" @tap="setShareStatus">{{shareText}}</view>
			</view>
		</u-navbar>
		<!-- #endif -->

		<!-- #ifdef H5 ||  APP-PLUS -->
		<u-navbar height="60" bgColor="#0081ff" leftIcon="">
			<view class="u-nav-slot text-xl flex" slot="center" >{{device.deviceName}} 分享管理</view>
			<view class="u-nav-slot flex" slot="right" >
				<view class="margin-right-sm text-xl text-white" @tap="setShareStatus">{{shareText}}</view>
			</view>
		</u-navbar>
		<!-- #endif -->

		<view class="cu-list menu card-menu margin-top xl-border" v-for="(item,index) in shareList" :key="index">
			<view class="cu-item">
				<view class="content flex align-center">
					<image class="round" style="width: 6vh;height: 6vh;" :src=" imgUrl + item.image"></image>
					<view class="flex flex-direction margin-left-sm">
						<text class="text-grey">{{item.username}}</text>
						<text class="text-grey text-sm" v-if="item.status == 1">{{item.createTime}}</text>
						<text class="text-grey text-sm" v-if="item.status == 0">等待用户接受</text>
					</view>
				</view>
				<view class="text-blue" @tap="delShare(item.shareId)">取消共享</view>
			</view>
		</view>

		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
		<view class="flex  justify-center cu-bar tabbar bg-white shadow foot margin--sm">
			<view class="text-blue cuIcon-add text-xl" @tap="addShare">添加共享</view>
		</view>

		<!-- 添加共享设备模态框 -->
		<view class="cu-modal" :class="SaveShareModel=='SaveShareModel'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">指定共享用户</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="bg-white">输入接受共享的用户手机号</view>
				<view class="cu-form-group">
					<input class="text-left padding-lr-xl my-input" v-model="guestPhone" placeholder="用户手机号"></input>
				</view>

				<view class="cu-bar bg-white margin-top-sm"
					style="display: flex;justify-content: center;border: #8799A3 solid 3rpx;">
					<view class="text-blue text-xxl" style="flex-grow: 1;" @tap="hideModal">取消</view>
					<view class="text-blue text-bold text-xxl" style="flex-grow: 1;border-left: #888888 solid 5rpx;"
						@tap="saveShare">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		isMobile
	} from '@/util/validate'
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				shareList: null,
				SaveShareModel: null,
				guestPhone: null,
				shareText: '禁用',
				device: {
					deviceId: null,
					deviceName: null,
					shareStatus: null
				},
			}
		},
		onLoad(option) {
			this.device.deviceId = option.deviceId
			this.device.deviceName = option.deviceName
			this.device.shareStatus = option.shareStatus
			this.isShareText(option.shareStatus)
			this.getShareList()

		},
		methods: {
			// 启用或禁用共享
			setShareStatus() {
				let that = this;
				this.$http.request({
					url: 'app/device/setShareStatus',
					method: 'POST',
					data: {
						'deviceId': this.device.deviceId,
						'shareStatus': that.shareText == '禁用' ? 0 : 1
					},
					success(data) {
						if (data.data && data.data.code == 0) {
							that.isShareText(that.shareText == '禁用' ? 0 : 1)
							uni.showToast({
								title: that.shareText == '禁用' ? '启用成功' : '禁用成功',
								icon: "none",
								position: 1000
							})
						}
					},
					fail() {
						uni.showToast({
							title: '服务器维护中....',
							position: 'top',
							icon: "none"
						})
					}
				})
			},
			isShareText(shareStatus) {
				if (shareStatus == 1 || shareStatus == 'true') {
					this.shareText = '禁用'
				} else {
					this.shareText = '启用'
				}
			},
			//取消共享
			delShare(shareId) {
				let that = this
				uni.showModal({
					content: '危险操作，是否继续！',
					success: function(res) {
						if (res.confirm) {
							that.$http.request({
								url: that.url + 'app/share/delete',
								method: 'GET',
								data: {
									'shareIds': shareId
								},
								success(data) {
									if (data.data && data.data.code == 0) {
										that.getShareList()
									}
								},
								fail() {
									uni.showToast({
										title: '服务器维护中....',
										position: 'top',
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {}
					}
				})
			},
			//显示添加共享模态框
			addShare() {
				this.SaveShareModel = "SaveShareModel"
			},
			//隐藏添加共享模态框
			hideModal() {
				this.SaveShareModel = null
			},
			getShareList() {
				this.$http.request({
					url: 'app/share/listAll',
					method: 'GET',
					data: {
						'deviceId': this.device.deviceId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.shareList = data.data.list
						}
					},
					fail() {
						uni.showToast({
							title: '服务器维护中....',
							icon: "none"
						})
					}
				})
			},
			//保存共享
			saveShare() {
				if (!isMobile(this.guestPhone)) {
					this.hideModal()
					uni.showToast({
						title: '手机格式错误！',
						icon: "none"
					})
					return
				}
				let that = this
				this.$http.request({
					url: 'app/share/save',
					method: 'POST',
					data: {
						guestPhone: this.guestPhone,
						deviceId: this.device.deviceId
					},
					success(data) {
						if (data.data && data.data.code == 0) {
							that.hideModal()
							uni.showToast({
								title: data.data.msg,
								icon: "none"
							})
							that.getShareList()
							that.gp = null
						} else {
							that.hideModal()
							uni.showToast({
								title: data.data.msg,
								icon: "none"
							})
						}
					},
					fail() {
						uni.showToast({
							title: '服务器维护中....',
							position: 'top',
							icon: "none"
						})
					}
				})
			},
			isBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
